import React, { useState } from 'react'
import { Form, Input, Button, message, Row } from "antd";
import UpdatePassword from './components/UpdatePassword';
import http from "@/services";
import MvCodeLogin from './components/MvCodeLogin';
import "./css/login.less";

const FormItem = Form.Item;
function selectComponent(currentState, props) {
    return currentState === 1 ? <MvCodeLogin {...props}></MvCodeLogin> : <UpdatePassword {...props}></UpdatePassword>;
}

export default function login({ history }) {
    const [form] = Form.useForm();
    const [currentState, setcurrentState] = useState(1)
    //下一步
    async function currentOne(values) {
        const result = await http.updateMvCode(values.code);
        if (result.data) {
            setcurrentState(0);
        } else {
            message.error(result.msg)
        }
    }
    // 为重置
    async function currentZero(values) {
        const result = await http.updatePwd(values.newPassword);
        if (result.data) {
            message.success(result.msg);
            history.push("/users/login");
        } else {
            message.error(result.msg);
        }
    }

    // 登录
    function handleSubmit(values) {
        if (currentState === 1) {
            currentOne(values);
        } else {
            currentZero(values);
        }
    }

    return (
        <div className='login-Container'>
            <div className='header Password-header'>
                {currentState === 1 ? "忘记密码" : "重置密码"}
            </div>
            <Form form={form} onFinish={handleSubmit}>
                {selectComponent(currentState, { FormItem, Input, Button, form })}
                <FormItem>
                    <Button block={true} type='primary' htmlType='submit'>{currentState === 1 ? "下一步" : "重置"}</Button>
                </FormItem>
            </Form>
            <></>
        </div>
    )
}
